<template>
	<view>
		<u-navbar class="navbar" :border-bottom="false" title="账户明细" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: bgColor}">
		</u-navbar>
		<view class="header u-text-center u-p-t-40 u-p-b-76">
			<view>
				<text class="u-font-28">账户余额（元）</text>
			</view>
			<view class="u-m-t-30">
				<text style="font-size: 58rpx;">{{ balance }}</text>
			</view>
		</view>
		<scroll-view class="list" :scroll-top="scrollTop" scroll-y="true" scroll-x="false" :style="{height: listStyle.height}" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
				<view class="u-flex u-row-between">
					<text>{{ item.name }}</text>
					<text v-if="item.type == 1" :style="{fontSize: '32rpx', color: themeColor}">-{{ item.price }}元</text>
					<text v-else :style="{fontSize: '32rpx'}">+{{ item.price }}元</text>
				</view>
				<view class="u-flex u-row-between u-m-t-22">
					<text class="grey-color u-font-24">{{ item.time }}</text>
					<text class="grey-color u-font-24">账户余额{{ item.yue }}元</text>
				</view>
			</view>
		<!-- </view> -->
		</scroll-view>
		<!-- <u-loadmore :status="loadStatus" /> -->
	</view>
</template>

<script>
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			const item = {
				name: '采购商品',
				type: [1, 2][Math.floor((Math.random()*[1, 2].length))],
				price: '100',
				time: '2021-08-30 16:33',
				yue: '1000'
			}
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				params: {
					
					PageIndex: 1,
					PageSize: 10
				},
				// list: Array(20).fill(item),
				list: [],
				balance: 0,
				loadStatus: 'loadmore',
				listStyle: {
					height: undefined
				}
			}
		},
		onLoad() {
			this.getAccountList()
			this.getShopAccount()
		},
		onReachBottom() {
			console.log(1)
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'})
		},
		onReady: function(res) {
			// var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.list').boundingClientRect()
					query.exec((res) => {
						this.listStyle.height = resu.windowHeight - res[0].top + 'px';
					})
				},
				fail: (res) => {}
			})
		},
		methods: {
			async getAccountList() {
				this.params.shopId = this.storeShop.id;
				const res = await this.$http.get('api/Shop/PageAccountBookDetails', { params: this.params })
				console.log(res)
				this.totalCount = res.totalCount
				this.list = res.list
			},
			async getShopAccount() {
				const res = await this.$http.get('api/Shop/GetShopAccountBook', { params: { id: this.storeShop.id } })
				this.balance = res.balance
			},
			upper: function(e) {
					// console.log(e)
			},
			lower: function(e) {
					console.log(1)
			},
			scroll: function(e) {
					// console.log(e)
					this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
					this.scrollTop = this.old.scrollTop
					this.$nextTick(() => {
						this.scrollTop = 0
					});
			}
		}
	}
</script>


<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	// .navbar {
	// 	height: 9.8vh;
	// }
	// .header {
	// 	height: 17vh;
	// }
	.list {
		// height: calc(100vh - 17vh );
		width: 100%;
		padding: 0 35rpx;
		white-space: nowrap;
		box-sizing: border-box;
		// padding-right: 50rpx;
		background-color: #FFFFFF;
		// overflow-y: scroll;
		.item {
			padding: 30rpx 0;
		}
	}
</style>
